<template>
  <el-form
    ref="formRef"
    v-loading="formLoading"
    :model="formData"
    :rules="formRules"
    label-width="120px"
  >
    <el-table :data="formData.usersExperienceSaveReqVOList">
      <el-table-column type="index" align="center" label="序号" min-width="68" />
      <el-table-column align="center" label="单位名称" min-width="168">
        <template #default="{ row }">
          <el-input v-model="row.companyName" class="w-100%" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="部门" min-width="168">
        <template #default="{ row }">
          <el-input v-model="row.companyDepart" class="w-100%" />
        </template>
      </el-table-column>

      <el-table-column align="center" label="岗位" min-width="168">
        <template #default="{ row }">
          <el-input v-model="row.companyPost" class="w-100%" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="公司地址" min-width="168">
        <template #default="{ row }">
          <el-input v-model="row.companyAddress" class="w-100%" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="证明人" min-width="168">
        <template #default="{ row }">
          <el-input v-model="row.companyVoucher" class="w-100%" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="证明人电话" min-width="168">
        <template #default="{ row }">
          <el-input v-model="row.companyVoucherTelphone" class="w-100%" />
        </template>
      </el-table-column>

      <el-table-column align="center" label="入职时间" min-width="168">
        <template #default="{ row }">
          <el-date-picker
            class="!w-full"
            v-model="row.entryDate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择入职时间"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" label="离职时间" min-width="168">
        <template #default="{ row }">
          <el-date-picker
            class="!w-full"
            v-model="row.dimissionDate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择离职时间"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" label="证书" min-width="168">
        <template #default="{ row }">
          <el-input v-model="row.certificate" class="w-100%" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="168">
        <template #default="{ row }">
          <el-button
            class="ml-5px!"
            type="primary"
            :disabled="formData.usersExperienceSaveReqVOList.length == 1"
            link
            @click.prevent="removeEmergency(row)"
          >
            <Icon icon="ep:minus" :size="20" />
          </el-button>
          <el-button class="ml-5px!" type="primary" link @click.prevent="addEmergency">
            <Icon icon="ep:plus" :size="20" />
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>
<script lang="ts" setup>
import * as UserApi from '@/api/system/user'

import { FormRules } from 'element-plus'
import { copyValueToTarget } from '@/utils'
import { propTypes } from '@/utils/propTypes'

defineOptions({ name: 'EducationForm' })
const props = defineProps({
  propFormData: {
    type: Object as PropType<UserApi.UserVO>,
    default: () => {}
  },
  activeName: propTypes.string.def('work')
})

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const message = useMessage() // 消息弹窗

const formData = reactive({
  usersExperienceSaveReqVOList: [
    {
      companyName: '',
      companyDepart: '', //部门
      companyPost: '', //岗位
      companyAddress: '', //工作地址
      companyVoucher: '',
      companyVoucherTelphone: '',
      entryDate: '', //入职日期
      dimissionDate: '', //离职日期
      certificate: ''
    }
  ] as any
})
const formRules = reactive<FormRules>({})
const formRef = ref() // 表单 Ref

/** 添加关联门店*/
const addEmergency = () => {
  formData.usersExperienceSaveReqVOList.push({
    companyName: '',
    companyDepart: '', //部门
    companyPost: '', //岗位
    companyAddress: '', //工作地址
    companyVoucher: '',
    companyVoucherTelphone: '',
    entryDate: '', //入职日期
    dimissionDate: '', //离职日期
    certificate: ''
  })
}
/** 删除关联门店*/
const removeEmergency = (item) => {
  const index = formData.usersExperienceSaveReqVOList.indexOf(item)
  if (index !== -1) {
    formData.usersExperienceSaveReqVOList.splice(index, 1)
  }
}
/** 将传进来的值赋值给 formData */
watch(
  () => props.propFormData,
  (data) => {
    if (!data) {
      return
    }
    copyValueToTarget(formData, data)
  },
  {
    immediate: true
  }
)
/** 表单校验 */
const emit = defineEmits(['update:activeName'])
const validate = async () => {
  if (!formRef) return
  try {
    await unref(formRef)?.validate()
    // 校验通过更新数据
    Object.assign(props.propFormData, formData)
  } catch (e) {
    message.error('【工作经历】不完善，请填写相关信息')
    emit('update:activeName', 'work')
    throw e // 目的截断之后的校验
  }
}
defineExpose({ validate })
onMounted(async () => {})
</script>
